<template>
  <div class="search-tag-drawer-content">
    <a-spin
      v-if="loading"
      :spinning="loading"
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        background: rgba(255, 255, 255, 0.5);
      "
    />
    <div class="targets-box">
      <div class="title">筛选标签</div>
      <div class="content">
        <!-- <a-radio-group v-model:value="type" @change="onChangeType">
          <a-radio-button v-for="{ value, label } in radios" :value="value">{{
            label
          }}</a-radio-button>
        </a-radio-group> -->
        <div class="tree">
          <a-tree
            :loading="loading"
            v-model:checkedKeys="tags[type].checkedKeys"
            checkable
            :selectable="false"
            :tree-data="treeData"
            @check="onCheck"
          >
          </a-tree>
        </div>
      </div>
    </div>
    <div class="selects-box">
      <div class="title">
        <div class="label">已添加标签({{ total }})</div>
        <iconfont
          name="#icon-feichu"
          style="cursor: pointer; font-size: 16px; color: rgba(0, 0, 0, 0.45)"
          @click="onRemoveAll"
        />
      </div>
      <div class="content">
        <template v-for="(item, type) in tags" :key="type">
          <!-- <div
            class="tag-type"
            style="margin-bottom: 9px"
            v-if="item.selected.length > 0"
          >
            {{ item.title }}
          </div> -->
          <div class="tags-selects" style="margin-bottom: 16px">
            <a-tag
              closable
              @close="onRemove(type, t)"
              style="margin-bottom: 9px"
              v-for="t in item.selected"
              :key="t.key"
            >
              {{ t.title }}
            </a-tag>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import mockAPI from '@/api/simple-mock.js'
import { getTagTree } from '@/api/tag.js'
/**
 * 事件
 */
let emit = defineEmits(['change'])

/**
 * 交互数据
 */
let tags = ref({
  person: { title: '个人标签', selected: [], checkedKeys: [] },
  // system: { title: '系统标签', selected: [], checkedKeys: [] },
})
/**
 * 标签操作
 */
//选中
function onCheck(checkeds, info) {
  tags.value[type.value].selected = info.checkedNodes.filter(
    ({ children }) => !children, //基于children来判断是否是叶子节点
  )
  emit('change', tags.value)
}
//移除
function onRemove(type, t) {
  tags.value[type].selected = tags.value[type].selected.filter(({ key }) => {
    return t.key !== key
  })
  tags.value[type].checkedKeys = tags.value[type].selected.map(({ key }) => {
    return key
  })
  emit('change', tags.value)
}
//全部移除
function onRemoveAll() {
  Object.keys(tags.value).forEach(key => {
    tags.value[key].selected = []
    tags.value[key].checkedKeys = []
  })
  emit('change', tags.value)
}
/**
 * 标签总个数
 */
let total = computed(() => {
  return Object.keys(tags.value).reduce((prev, key) => {
    prev += tags.value[key].selected.length
    return prev
  }, 0)
})
/**
 * 类型选择
 */
let type = ref(Object.keys(tags.value)[0])
let radios = ref(
  Object.keys(tags.value).map(key => ({
    value: key,
    label: tags.value[key].title,
  })),
)
/**
 * 加载内容数据
 */
let treeData = ref([])
let loading = ref(false)
// let expandedKeys = ref([])
// let selectedKeys = ref([])
// let checkedKeys = ref([])

async function onChangeType() {
  loading.value = true
  try {
    let result = await getTagTree()
    treeData.value = result?.data || []
  } catch (e) {}
  loading.value = false
}

onMounted(onChangeType)
</script>
<style lang="less" scoped>
.search-tag-drawer-content {
  position: relative;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  .title {
    color: #000000;
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
  }
  .content {
    padding: 16px;
  }
  .targets-box {
    width: 50%;
    border-right: solid 1px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .tree {
        // margin-top: 16px;
        overflow: auto;
        flex: 1;
      }
    }
  }
  .selects-box {
    width: 50%;
    overflow: auto;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
